<template>
  <g
    class="battle"
    :transform="`translate(${BLOCK}, ${BLOCK})`"
  >
    <rect
      :width="FIELD"
      :height="FIELD"
      fill="#000"
    />
    <MapLayer />
    <Eagle />
    <Player />
    <FlickerLayer />
    <StageAnim />
    <PauseAnim />
    <GameOver />
  </g>
</template>

<script setup>
  import { BLOCK, FIELD } from '@/utils/global'
  import MapLayer from '@/components/MapLayer.vue'
  import Eagle from '@/components/Eagle.vue'
  import GameOver from '@/components/GameOver.vue'
  import StageAnim from '@/components/StageAnim.vue'
  import Player from '@/components/Player.vue'
  import PauseAnim from '@/components/PauseAnim.vue'
  import FlickerLayer from '@/components/FlickerLayer.vue'

</script>

<style lang="scss" scoped>

</style>